<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card" style="min-height: 200px;">
                    <h3>{{title}}</h3>
                    <div v-if="topicList.length > 0" class="tpoic-rigth">
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                切换话题<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="topic in topicList" :key="topic.id" :command="topic.id">
                                    {{topic.name}}
                                    <el-badge class="mark" :value="topic.count" />
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <hr/>
                    <div v-for="item in dataList" :key="item.id" class="question-box">
                        <el-row>
                            <avue-avatar size="large" v-if="item.avatar !== ''" :src="item.avatar" icon="el-icon-s-custom"></avue-avatar>
                            <avue-avatar size="large" v-else-if="item.avatar === ''" icon="el-icon-s-custom"></avue-avatar>
                            <el-link @click="customer(item.user_id)" type="success" :underline="false">{{item.username}}<br />
                                {{item.catesShow}}
                            </el-link>
                            &nbsp;&nbsp;
                            <!-- <el-divider direction="vertical"></el-divider> -->
                            <el-link @click="detail(item)" :underline="true">{{item.title}}</el-link>
                            <el-link v-if="item.leadOrigin !== '' && item.leadOrigin !== null" type="info" :underline="false"> - {{item.leadOrigin}}</el-link>
                            <div class="question-toolbar">
                                <el-link type="info" :underline="false">
                                    <el-tooltip class="item" effect="light" :content="item.starTips" placement="top">
                                        <i class="el-icon-star-off">&nbsp;&nbsp;{{item.star}}</i>
                                    </el-tooltip>
                                </el-link>
                                &nbsp;
                                <el-divider direction="vertical"></el-divider>
                                &nbsp;
                                <el-link style="text-decoration: underline dotted;" type="info" :underline="false">{{item.timeShow}}</el-link>
                            </div>
                            <el-card v-if="item.show === 1" style="margin-top: 10px;background: #F2F6FC;border: 1px solid #EBEEF5;">
                                <avue-article :option="detailOption" :data="item"></avue-article>
                            </el-card>
                        </el-row>
                        <el-divider></el-divider>
                    </div>
                    <el-pagination
                        @current-change="QLHandleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import {
        isNull
    } from '../../util/util'
    import {
        getToken
    } from '../../util/auth'
    export default {
        inject: ['reload'],
        data() {
            return {
                title: '',
                dataList: [],
                topicList: [],
                zhihuUserInfo: null,
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
                detailOption: {
                    props: {
                        title: 'title',
                        meta: 'meta',
                        body: 'body'
                    },
                },
            }
        },
        created() {
            if (localStorage.getItem('zhihuUserInfo') && localStorage.getItem('zhihuUserInfo') !== 'null' && getToken()) {
                this.zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
            }
            this.getTopicListData(),
            this.getWebTopicsEffect()
        },
        methods: {
            QLHandleCurrentChange (currentPage) {
                this.page.currentPage = currentPage
                this.getTopicListData()
            },
            detail(item) {
                if (!this.checkUserInfo()) {
                    var show = item.show === 1 ? 0 : 1;
                    Vue.set(item, 'show', show)

                    if (show === 1) {
                        const params = {
                            user_id: isNull(this.zhihuUserInfo) ? 0 : this.zhihuUserInfo.id,
                            question_id: item.id
                        }
                        this.axios.post(this.$API.ZHIHUAPI.viewShowQuestion, this.qs.stringify(params)).then((res) => {

                        }).catch(() => {})
                    }

                    return
                }
                
                this.$router.push({
                    path: '/questionComment',
                    query: {
                        question_id: item.id,
                        user_id: item.user_id
                    }
                })
            },
            checkUserInfo() {
                return isNull(this.zhihuUserInfo) ? false : true;
            },
            customer(userId) {
                if (!this.checkUserInfo()) {
                    return
                }
                if (this.zhihuUserInfo.id === userId) {
                    this.$router.push({path: "/customer"})
                } else {
                    this.$router.push({path: `/custuser/${userId}`})
                }
            },
            handleCommand(command) {
                if (command == this.$route.params.topicId) {
                    return
                }
                this.$router.push({path: `/topic/${command}`})
                this.reload()
            },
            getWebTopicsEffect() {
                const _this = this
                _this.axios.post(_this.$API.ZHIHUAPI.getWebTopicsEffect).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.topicList = res.data
                        } else {
                            _this.topicList = []
                        }
                    } else {
                        _this.topicList = []
                    }
                }).catch(() => {
                    _this.topicList = []
                })
            },
            getTopicListData() {
                const _this = this
                const fullscreenLoading = _this.$loading({
                    lock: true,
                    text: '拼命加载中',
                    spinner: 'el-icon-loading'
                })
                const params = {
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                    topic_id: _this.$route.params.topicId,
                    user_id: isNull(_this.zhihuUserInfo) ? 0 : _this.zhihuUserInfo.id,
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getTopicListData, _this.qs.stringify(params)).then((res) => {
                    fullscreenLoading.close()
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.dataList = res.data.list
                            _this.page.total = res.data.count
                            _this.title = res.data.title
                        } else {
                            _this.dataList = []
                            _this.page.total = 0
                            _this.title = ''
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.dataList = []
                        _this.page.total = 0
                        _this.title = ''
                    }
                }).catch(() => {
                    fullscreenLoading.close()
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.dataList = []
                    _this.page.total = 0
                    _this.title = ''
                })
            },
            handleAxiosFun(tips, url, params, done, loading) {
                const _this = this
                _this.axios.post(url, _this.qs.stringify(params)).then((res) => {
                    if (res.data.code === 10000) {
                        if (tips === 0) {
                            _this.$message({
                                showClose: false,
                                message: res.data.message,
                                type: 'success'
                            })
                        }
                        // _this.refresh()
                        if (done) {
                            done()
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'error'
                        })
                        if (loading) {
                            loading()
                        }
                    }
                }).catch(() => {
                    if (tips === 0) {
                        _this.$message({
                            showClose: false,
                            message: '网络连接失败，请重试！',
                            type: 'error'
                        })
                    }
                    if (loading) {
                        loading()
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .question-toolbar {
        display: inline-block;
        float: right;
        margin-top: 8px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .tpoic-rigth {
        display: inline-block;
        float: right;
        margin-top: -40px;
        margin-right: 10px;
    }
</style>
